<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
      <el-form-item label="标题">
        <el-input v-model="queryParams.title" placeholder="请输入帖子标题" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="success" icon="Plus" @click="handlePublish">发帖</el-button>
      </el-form-item>
    </el-form>

    <!-- 帖子列表 -->
    <div class="post-list">
      <el-card v-for="item in postList" :key="item.postId" class="post-card" @click="handleViewDetail(item)">
        <div class="post-header">
          <h3 class="post-title">{{ item.title }}</h3>
          <div class="post-meta">
            <el-tag size="small">{{ item.categoryName }}</el-tag>
            <span class="post-author">{{ item.userName }}</span>
            <span class="post-time">{{ parseTime(item.createTime) }}</span>
          </div>
        </div>
        <div class="post-content">{{ item.content }}</div>
        <div class="post-footer">
          <div class="post-stats">
            <span class="stat-item">
              <el-icon><View /></el-icon>
              {{ item.viewCount }}
            </span>
            <span class="stat-item">
              <el-icon><ChatLineRound /></el-icon>
              {{ item.replyCount }}
            </span>
            <span class="stat-item">
              <el-icon><Star /></el-icon>
              {{ item.likeCount }}
            </span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="ForumList">
import { getCurrentInstance, ref, reactive, toRefs, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { View, ChatLineRound, Star } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance();
const router = useRouter();

const postList = ref([]);
const loading = ref(true);
const total = ref(0);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: undefined
  }
});

const { queryParams } = toRefs(data);

/** 查询帖子列表 */
function getList() {
  loading.value = true;
  // TODO: 调用后端API获取帖子列表
  loading.value = false;
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}

/** 发帖按钮操作 */
function handlePublish() {
  router.push('/forum/publish');
}

/** 查看帖子详情 */
function handleViewDetail(item) {
  router.push(`/forum/post/${item.postId}`);
}

onMounted(() => {
  getList();
});
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}
.post-list {
  margin-bottom: 20px;
}
.post-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.post-header {
  margin-bottom: 15px;
}
.post-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: bold;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 14px;
}
.post-author {
  color: #409EFF;
}
.post-content {
  color: #666;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.post-stats {
  display: flex;
  gap: 20px;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #999;
}
</style> 